<template>
  <div>
    <el-card>
      <LiveOverview :tabs="realTimeData" title="数据概况" @refresh="handleSettlementStatistics">
        <div slot="search">
          <p class="mb-5 ft-12">
            <span style="color: #fc4560">*</span>
            <span>结算单每月1号（00:00）自动生成</span>
          </p>
          <SearchForm
            :form-option="formOption"
            :show-btn="true"
            :btn-list="btnList"
            v-model="formOption.data"
            label-width="90px"
          />
        </div> </LiveOverview
    ></el-card>

    <el-card class="mt-20">
      <SettleTable v-model="currentKey" />
    </el-card>
  </div>
</template>

<script>
import SettleTable from '../components/SettleTable.vue'
import { useFilterStatistics } from '@/hooks'
export default {
  name: 'SettleRefresh',
  components: {
    SettleTable
  },
  data() {
    return {
      currentKey: 'noNum',
      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'monthrange',
            label: '核算月份',
            value: 'time',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM'
          }
        ],
        data: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.handleSettlementStatistics()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = {}
            this.handleSettlementStatistics()
          }
        }
      ],
      // 实时刷新数据项
      realTimeData: [
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'totalIncomeAmount',
            label: '平台累计支入积分'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '各平台累计支入好物积分'
          },
          yesterdayData: {
            key: 'totalIncomeAmount',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'incomeNum',
            label: '平台累计支入笔数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '各平台累计支入笔数'
          },
          yesterdayData: {
            key: 'incomeNum',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'platformEtpNum',
            label: '接入平台企业主数',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'totalExchangeAmount',
            label: '累计兑换积分'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户在平台兑换好物积分'
          },
          yesterdayData: {
            key: 'totalExchangeAmount',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'exchangeOrderNum',
            label: '累计兑换订单数',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '客户在平台兑换订单数'
          },
          yesterdayData: {
            key: 'exchangeOrderNum',
            isShow: true,
            value: '',
            isUnit: {
              startText: '上月'
            }
          }
        }
      ]
    }
  },
  activated() {
    this.handleSettlementStatistics()
  },
  created() {
    this.handleSettlementStatistics()
  },
  methods: {
    //获取参数
    handleParams() {
      let params = {}
      const { time } = this.formOption.data
      if (time && time.length) params.startMonth = time[0]
      if (time && time.length) params.endMonth = time[1]
      return params
    },
    // 获取积分结算-数据概况
    async handleSettlementStatistics() {
      const params = this.handleParams()
      const { data } = await this.$http.integral.integralSettlementApi.getIntegralStatistics(params)

      // 统计数据
      const realTimeData = {
        baseData: {
          ...data.baseData,
          platformEtpNum: data.platformEtpNum
        },
        yesterdayData: { ...data.yesterdayData }
      }

      const { time } = this.formOption.data
      const flag = time && time.length ? false : true
      this.realTimeData = useFilterStatistics(this.realTimeData, realTimeData, flag)
    }
  }
}
</script>
